<!-- 原始处方 | 药品list的价格 -->
<template>
	<view class="height-vh bg-or flex-direction-column">
		<scroll-view scroll-y="true" class="" style="height: calc(100vh - 200rpx);">
			<view class="bg-white radius-xl padding margin">
				<view class="flex-direction-row align-center justify-between">
					<view class="flex-direction-row align-center">
						<text class="text-xsl iconfont color-df">&#xe77c;</text>
						<text class="text-lg margin-left-xs color-df">{{statusArr[detailData.status]}}</text>
					</view>
					<view class="flex-direction-row align-center"
						@click="$navigator('/pages/hall/patientData?prescriptionCondition='+JSON.stringify(detailData.prescriptionCondition))">
						<text class="text-smd color-black">患者资料</text>
						<text class="text-xs iconfont color-black-q margin-left-xs">&#xe61f;</text>
					</view>
				</view>
				<view class="flex-direction-row align-center padding-tb-sm border-top margin-top">
					<text class="text-df text-bold">{{detailData.department}}</text>
					<text class="botton text-xsm color-black-q margin-left-sm">免费开方</text>
				</view>
				<view class="flex-direction-column">
					<text class="text-df">病情描述：</text>
					<text class="text-smd color-black margin-top-xss">
						{{detailData.prescriptionCondition?.patientDescription}}</text>
				</view>
			</view>
			<!-- 已选药品 -->
			<view class="bg-white radius-xl padding margin">
				<text class="text-df text-bold">已选药品</text>
				<block v-for='(item,index) in detailData?.prescriptionProductItemList' :key='index'>
					<view class="flex-direction-row margin-top-sm">
						<image :src="item.imageUrl || '/static/logo.png'" class="cu-photo flex-shrink radius"></image>
						<view class="flex-direction-column flex-sub margin-lr">
							<view class="flex-direction-column flex-sub">
								<text class="text-df color-black">{{item.productName}}</text>
								<text class="text-xsm margin-top-xs color-black-b">规格：{{item.productSpaceName}}</text>
							</view>
							<view class="flex-direction-row align-center justify-between">
								<view class="flex-direction-row align-center">
									<text class="text-smd color-df">￥</text>
									<text class="text-smd color-df text-bold">{{item.price}}</text>
								</view>
								<text class="text-sm color-black-b">x{{item.count}}</text>
							</view>
						</view>
					</view>
				</block>
			</view>
			<!-- 患者情况 -->
			<view class="bg-white radius-xl padding margin">
				<view class="padding-bottom-sm">
					<text class="text-df text-bold">患者情况</text>
				</view>
				<view class="flex-direction-row justify-between align-center padding-tb-sm">
					<text class="text-smd color-black">患者信息</text>
					<text class="text-smd color-black">{{detailData.prescriptionCondition?.prescriptionPatient?.name}}
						{{detailData.prescriptionCondition?.prescriptionPatient?.gender===1?'男':'女'}}
						{{detailData.prescriptionCondition?.prescriptionPatient?.age}}岁</text>
				</view>
				<view class="flex-direction-row justify-between align-center padding-tb-sm">
					<text class="text-smd color-black">所患疾病</text>
					<text class="text-smd color-black">{{detailData.prescriptionCondition?.diseasesSuffered}}</text>
				</view>
				<view class="flex-direction-row justify-between align-center padding-tb-sm">
					<text class="text-smd color-black">肝功能</text>
					<text
						class="text-smd color-black">{{liverArr[detailData.prescriptionCondition?.liverFunction]}}</text>
				</view>
				<view class="flex-direction-row justify-between align-center padding-tb-sm">
					<text class="text-smd color-black">肾功能</text>
					<text
						class="text-smd color-black">{{kidneyArr[detailData.prescriptionCondition?.renalFunction]}}</text>
				</view>
				<view class="flex-direction-row justify-between align-center padding-tb-sm">
					<text class="text-smd color-black">过敏史</text>
					<text
						class="text-smd color-black">{{allergyArr[detailData.prescriptionCondition?.allergyHistory]}}</text>
				</view>
				<view class="flex-direction-row justify-between align-center padding-tb-sm">
					<text class="text-smd color-black">生育计划或状态</text>
					<text
						class="text-smd color-black">{{marriageArr[detailData.prescriptionCondition?.familyPlan]}}</text>
				</view>
			</view>
			<view class="flex-direction-row justify-center margin-tb col-1"	v-if="detailData.prescriptionCondition?.patientImage">
				<!-- <view class="border-df padding-lr-xl padding-tb-sm radius-sl" @click="openPopup"> -->
				<view class="border-df padding-lr-xl padding-tb-sm radius-sl"
					@click="$navigator('/pages/prescription/original?patientImage='+detailData.prescriptionCondition?.patientImage)">
					<text class="text-df color-df text-bold">查看原始处方</text>
				</view>
			</view>
		</scroll-view>
		<!-- 底部固定 -->
		<!-- 
		1、如果状态status===0，则是待接诊，需要出现接诊按钮
		2、如果status!==0，则是已接诊，需要判断是不是登录医师的接诊，如果是（isPrescriptionFlag===1），则要出现底部的退单		 
		-->
		<template v-if="detailData.status==0 || detailData.isPrescriptionFlag==1">
			<view class="bg-white border-top" style="height: 200rpx;">
				<view class="padding flex-direction-row justify-around">
					<template v-if="detailData.isPrescriptionFlag===1">
						<view class="bg-black-b radius-sl padding-tb-sm text-center" style="width: 250rpx;" @click="chargeback">
							<text class="text-df color-white">退单</text>
						</view>
						<view class="bg-df radius-sl padding-tb-sm text-center" style="width: 250rpx;" @click="$navigator('/pages/hall/consultation?id='+optionId)">
							<text class="text-df color-white">继续沟通</text>
						</view>
					</template>
					<template v-if="detailData.status==0">
						<view class="bg-df radius-sl padding-tb-sm text-center" style="width: 250rpx;" @click="accept">
							<text class="text-df color-white">接诊</text>
						</view>
					</template>
				</view>
			</view>
		</template>
		<!-- 要使用上面的判断 -->
		<!-- <view class="bg-white border-top" style="height: 200rpx;">
			<view class="padding flex-direction-row justify-around">
				<view class="bg-black-b radius-sl padding-tb-sm text-center" style="width: 250rpx;" @click="chargeback">
					<text class="text-df color-white">退单</text>
				</view>
				<view class="bg-df radius-sl padding-tb-sm text-center" style="width: 250rpx;" @click="accept" v-if="detailData.status==0">
					<text class="text-df color-white">接诊</text>
				</view>
			</view>
		</view> -->
		<!-- 原始处方popup -->
		<uni-popup ref="originalPopup" type="center">
			<view class="bg-white radius-xl flex-direction-column"
				style="width: 660rpx; z-index: 1000; max-height: 80vh;">
				<view class="padding-tb-xsm bg-df text-center position-relative">
					<text class="text-lg color-white">原始处方</text>
					<text class="text-xsl iconfont color-white position-absolute right top padding-xsm"
						@click="closePopup">&#xe662;</text>
				</view>
				<scroll-view scroll-y="true" class="flex-sub" style="height: 60vh;">
					<view class="text-center">
						<block v-for='(item,index) in patientImage' :key='index'>
							<image :src="item" style="max-height: 72vh;" class="margin-top" mode="widthFix"></image>
						</block>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<!-- 退单popup -->
		<uni-popup ref="chargebackPopup" type="center">
			<view class="bg-white radius-xl overflow-hidden" style="width: 660rpx; z-index: 1000;">
				<view class="padding-tb-xsm bg-df text-center">
					<text class="text-lg color-white">选择退单原因</text>
				</view>
				<view class="padding">
					<block v-for='(item,index) in chargebackReason' :key='index'>
						<view class="flex-direction-row justify-between padding-tb-xsm"
							@click="chargebackChange(index)">
							<text class="text-lg"
								:class="[chargebackIndex===index?'color-df':'color-black']">{{item}}</text>
							<view class="circle" :class="{'circle-select':chargebackIndex===index}">
								<view class="circle-round" v-show="chargebackIndex===index"></view>
							</view>
						</view>
					</block>
				</view>
				<view class="flex-direction-row justify-around padding-tb border-top">
					<view class="border-gray radius-sl text-center padding-tb-xs" style="width: 200rpx;"
						@click="closePopup">
						<text class="text-df color-black-q">取消</text>
					</view>
					<view class="border-df radius-sl text-center padding-tb-xs" style="width: 200rpx;"
						@click="chargebackYes">
						<text class="text-df color-df">确定</text>
					</view>
				</view>
			</view>
			<view class="" style="height: 200rpx;"></view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			console.log('getDetail option: ',option);
			// 
			this.optionId = option.id;
			option.id && this.getDetail();
			// 监听咨询页面处方状态改变，已开方
			uni.$on('updateSavePrescription', data => {
				// 获取处方基本信息
				this.getDetail()
			})
		},
		onUnload() {
			uni.$off('updateSavePrescription');
		},
		data() {
			return {
				detailData: [],
				// 原始处方图片数组
				patientImage: [],
				chargebackReason: [
					'咨询不对症',
					'患者资料不全',
					'患者病情复杂'
				],
				chargebackIndex: 0,
				statusArr: ['待接诊', '待开方', '已审核', '已复核', '已开方'],
				liverArr: ['正常', '异常', '不清楚'],
				kidneyArr: ['正常', '异常', '不清楚'],
				allergyArr: ['无', '有', '不清楚'],
				marriageArr: ['无', '准备期', '怀孕期', '不清楚'],
			}
		},
		methods: {
			async getDetail() {
				const res = await uni.$request.get('/doctorPrescriptionApi/' + this.optionId, {});
				console.log('getDetail res: ', res.data);
				if (res.code === 200) {
					this.detailData = res.data;
					// 测试用
					// this.detailData.isPrescriptionFlag = 1;
				} else {
					uni.showModal({
						title: '提示',
						content: '数据查询失败',
						showCancel: false
					});
				}
			},
			// 接诊
			async accept() {
				const res = await uni.$request.post('/receptionHallApi/receivePatient', {
					id: this.optionId
				});
				console.log('accept res: ', res.data);
				if (res.code === 200) {
					// this.detailData = res.data;
					uni.showToast({
						title: '接诊成功',
						icon: 'none'
					});
					// 更新本页面数据
					this.getDetail(this.optionId)
					// 接单成功，需要更新首页和接单大厅的接单数据
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/hall/consultation?id=' + this.optionId,
							success() {
								uni.$emit('updateSavePrescription');
							}
						});
					}, 800);
				} else {
					uni.showModal({
						title: '提示',
						content: '接诊失败',
						showCancel: false
					});
				}
			},
			openPopup() {
				// 处理原始处方图片字段
				if (this.detailData.prescriptionCondition?.patientImage) {
					this.patientImage = this.detailData.prescriptionCondition?.patientImage.split(",");
					this.$refs.originalPopup.open();
				} else {
					uni.showToast({
						title: '无原始处方数据',
						icon: 'none'
					});
				}
			},
			closePopup() {
				this.$refs.originalPopup.close();
				this.$refs.chargebackPopup.close();
			},
			// 退单popup
			chargeback() {
				this.$refs.chargebackPopup.open();
			},
			// 退单原因
			chargebackChange(index) {
				this.chargebackIndex = index;
			},
			// 确定退单
			async chargebackYes() {
				const res = await uni.$request.post('/receptionHallApi/cancelPatient', {
					id: this.optionId,
					cancelReason: this.chargebackReason[this.chargebackIndex]
				});
				console.log('chargebackYes res: ', res.data);
				this.$refs.chargebackPopup.close();
				if (res.code === 200) {
					// this.detailData = res.data;
					uni.showToast({
						title: '退单成功',
						icon: 'none'
					});
					// 更新页面
					setTimeout(()=> {
						this.getDetail(this.optionId)
					}, 800);
				} else {
					uni.showModal({
						title: '提示',
						content: '退单失败',
						showCancel: false
					});
				}
				
			}
		}
	}
</script>

<style scoped>
	.botton {
		background: rgba(101, 182, 116, 0.15);
		border-radius: 4rpx;
		border: 1rpx solid #65B674;
		padding: 4rpx 8rpx;
		color: #65B674;
	}

	.circle {
		width: 36rpx;
		height: 36rpx;
		border-radius: 36rpx;
		border: 2rpx solid #666666;
	}

	.circle-round {
		margin: 8rpx;
		width: 20rpx;
		height: 20rpx;
		border-radius: 20rpx;
		background: #D93722;
	}

	.circle-select {
		/* border-color:'#d93722' */
		border: 2rpx solid #d93722;
	}
</style>